<template>
  <div class="app-container">
    <!-- 分区卡片区域 -->
    <el-row :gutter="20" style="margin-bottom: 20px;">
      <el-col :span="8" v-for="(zone, index) in zones" :key="index">
        <el-card shadow="hover" style="border-radius: 8px; background-color: #f9f9f9;">
  <!-- 标题与需水量 -->
  <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
    <span style="font-weight: bold; font-size: 16px;color: #339933;">{{ zone.title }}</span>
    <span style="color: #339933; font-size: 16px; font-weight: bold;">需水量: {{ zone.waterNeed }} m³</span>
  </div>

  <!-- 图像区域（更高） -->
  <div class="image-placeholder" style="height: 200px; background-color: #e6f7e6; border-radius: 4px; display: flex; align-items: center; justify-content: center; margin-bottom: 15px;">
    高光谱图像区域
  </div>

  <!-- 指标平铺 -->
  <div class="metrics" style="display: flex; justify-content: space-between; align-items: center; padding: 10px 0; gap: 8px;">
    <div style="text-align: center; flex: 1;">
      <div style="font-size: 18px; font-weight: bold; color: #339933;">{{ zone.gndvi }}</div>
      <div style="font-size: 12px; color: #666;">GNDVI</div>
    </div>
    <div style="text-align: center; flex: 1;">
      <div style="font-size: 18px; font-weight: bold; color: #339933;">{{ zone.osavi }}</div>
      <div style="font-size: 12px; color: #666;">OSAVI</div>
    </div>
    <div style="text-align: center; flex: 1;">
      <div style="font-size: 18px; font-weight: bold; color: #339933;">{{ zone.ndvi }}</div>
      <div style="font-size: 12px; color: #666;">NDVI</div>
    </div>
    <div style="text-align: center; flex: 1;">
      <div style="font-size: 18px; font-weight: bold; color: #339933;">{{ zone.ndre }}</div>
      <div style="font-size: 12px; color: #666;">NDRE</div>
    </div>
    <div style="text-align: center; flex: 1;">
      <div style="font-size: 18px; font-weight: bold; color: #339933;">{{ zone.lci }}</div>
      <div style="font-size: 12px; color: #666;">LCI</div>
    </div>
    <div style="text-align: center; flex: 1;">
      <div style="font-size: 18px; font-weight: bold; color: #339933;">{{ zone.moisture }}%</div>
      <div style="font-size: 12px; color: #666;">土壤湿度</div>
    </div>
  </div>
</el-card>
      </el-col>
    </el-row>

    <!-- 灌溉决策详情 -->
    <el-card shadow="hover" style="border-radius: 8px; margin-top: 20px;">
      <div slot="header" style="display: flex; justify-content: space-between; align-items: center;">
        <span style="color: #339933; font-weight: bold;">灌溉决策详情</span>
        <el-button type="success" size="small">导出灌溉计划</el-button>
      </div>

      <div style="display: flex; gap: 20px;">
        <!-- 处方图可视化区域 -->
        <div style="flex: 3; height: 300px; background-color: #e6f7e6; border-radius: 4px; display: flex; align-items: center; justify-content: center;">
          处方图可视化区域
        </div>

        <!-- 灌溉量汇总 -->
        <div style="flex: 1; padding: 20px; background-color: #f9f9f9; border-radius: 4px;">
          <div style="font-weight: bold; color: #339933; margin-bottom: 10px;">灌溉量汇总</div>
          <div v-for="(zone, index) in zones" :key="index" style="margin-bottom: 10px;">
            <div style="display: flex; justify-content: space-between;">
              <span>{{ zone.title }}</span>
              <span>{{ zone.waterNeed }} m³</span>
            </div>
          </div>
          <div style="border-top: 2px solid #339933; margin-top: 15px; padding-top: 10px; font-weight: bold; color: #339933;">
            总需水量 {{ totalWater }} m³
          </div>
          <el-button type="success" style="width: 100%; margin-top: 10px;" @click="executePlan">执行灌溉计划</el-button>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      zones: [
        {
          title: '分区 1',
          gndvi: '0.72',
          moisture: '42',
          waterNeed: '85',
          osavi: '0.68',
          ndvi: '0.75',
          ndre: '0.42',
          lci: '1.2'
        },
        {
          title: '分区 2',
          gndvi: '0.65',
          moisture: '38',
          waterNeed: '120',
          osavi: '0.62',
          ndvi: '0.70',
          ndre: '0.39',
          lci: '1.1'
        },
        {
          title: '分区 3',
          gndvi: '0.68',
          moisture: '45',
          waterNeed: '80',
          osavi: '0.65',
          ndvi: '0.73',
          ndre: '0.41',
          lci: '1.3'
        }
      ]
    }
  },
  computed: {
    totalWater() {
      return this.zones.reduce((sum, zone) => sum + parseInt(zone.waterNeed), 0)
    }
  },
  methods: {
    viewDetail(index) {
      console.log('查看分区', index + 1, '详情')
    },
    executePlan() {
      this.$message.success('灌溉计划已执行！')
    }
  }
}
</script>

<style scoped>
.app-container {
  padding: 20px;
}
</style>